<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>

<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	.index_theLeft li {
	    list-style: none;
	    position: relative;
		padding: 15px 0 15px 20px;
	    border-bottom: 1px solid #f9f9f9;
	    cursor: pointer;
	}
	.returnlink {
		margin-right: 30px;
    	cursor: pointer;
    	color: #18bbfc;
	}
	.index_theLeft li.active , .index_theLeft li:HOVER{
		background: #f9f9f9;
	}
	
	.index_theLeft li span,.index_theLeft li h5{
		text-align: center;
		color: #333;
	}
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	.sceneList-info{
		margin-left: 0px;
/* 	    margin-right: 40px; */
	    padding-top: 10px;
	}
	h3{
		margin: 15px 0;
	}
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
/* 	    padding-bottom: 20px; */
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}
	.sensor_detail_title{
		padding: 15px 0;
	}
	.jui-echart{
		padding: 10px;
		border: 1px solid #dadada;
	}
	.detail-line{
		padding: 3px 0;
	}
	.span-btn{
		border: 1px solid #aaa;
    	padding: 1px 8px;
    	border-radius: 5px;
    	color:#666;
    	font-weight: 500 ;
    	margin-left: 2px;
    	cursor: pointer;
	}
	.span-btn.active {
		background: #aaa ;
		color: #fff;
	}
	.span-btn:HOVER{
		background: #aaa ;
		color: #fff;
	}
	#gycanvas{
		z-index: 488;
	}
	.tbody tr{
		cursor: pointer;
	}
</style>
</head>
<body>
	<div>
		<%@include file="moudle/header.jsp" %>
		<span class="active hide">monitor</span>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;padding-top: 70px;">
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<ul class="dashboard-menu scoll">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="forwardUrl('/iot/sensors_detail?id=${obj.id}&sid=${sceneId}')"  
						 <c:if test="${obj.id == sensorId}">
						 	 class="active"
						 </c:if> 
						  sid="${obj.id}">
	                       <span class="icon-codepen"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							
							<div class="pt-10 pl-5">
								<div class="clearfloat" style="position: relative;">
									<div class="clearfloat liner">
										<h4 class="pb-10" style="border-bottom: 2px solid #18bbfc">
											<span>传感器详情</span>
											<span class="float-right returnlink " onclick="returnBack()">返回  <span class="icon-sign-out"></span></span>
										</h4>
									</div>
									<!-- 操作栏  -->
									<div style="padding: 10px 0;" class=" jui-search_table"  config-option=" submit:'#searchbtns',
															 table:'#init-table',
															 param:{ scene_id: '$scene_id$',sensor_id:'$sensor_id$' },
															 before:'beforeCheck'" >
										<span class="ml-10">开始时间：</span>
										<input type-name="start_time" class="input input-self jui-time start_time" data-options="defaultValue:-1" >
										<span class="ml-10">结束时间：</span>
										<input type-name="end_time" class="input input-self jui-time end_time" >
										<span class="ml-10">查询间隔：</span>
										<select type-name="query_interval_type"  class="queryType input jui-selecter input-self input-select" >
											<option value=''>不设间隔</option>
											<option value='1'>30s</option>
											<option value='2'>1min</option>
											<option value='3'>30min</option>
											<option value='4'>60min</option>
										</select>
										<button onclick="waydisplay()" class="button ml-20 bg-iot float-right"><span class="icon-cloud-download"></span> 路径显示</button>
										<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> 查询</button>
									</div>
									<!-- 地图  -->
									<div>
										<img id="mapimg" onload="loadData()" style="width: 100%;" >
										<canvas id="gycanvas" style="position: absolute;top:87.5px;left: 0;"  ></canvas>
									</div>
									
									<!-- 历史数据表格  -->
									<div style="margin-top:10px;">
										<div id="init-table" class="jui-table"  data-options=" url:'/page/sensor/history',
													param:{ scene_id: '$scene_id$',start_time:'$.start_time$',end_time:'$.end_time$',sensor_id:'$sensor_id$'  },
													columns:[
														{ name:'序号','type':'seq','value':'seq','width':'4%'}, 
														{ name:'传感器名称','value':'sensor_name','width':'10%'}, 
														{ name:'类型','value':'iot_sensor_type', type:'category' ,'width':'10%'}, 
														{ name:'数值','value':'sdata','width':'10%'},
														{ name:'时间','type':'time','value':'atime','width':'15%'}]" > 
										</div>
									</div> 
									
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	// 项目id 和 sensor_id
	var scene_id = GetQueryString("sid") ;
	var sensor_id = GetQueryString("id") ;

	function beforeCheck(){
		if(DateUtil.compare(gic("start_time").val(),gic("end_time").val(),30*24*60*60*1000 )){
			return true ;
		}
		tip("查询时间不能超过一个月");
		return false ;
	}
	
	function waydisplay(){
		if(t != null){
			 window.clearInterval(t);
		}
		commonAjax('POST',localUrl+ '/page/sensor/history?paged=1&page_size=100' , "{ scene_id: '$scene_id$',start_time:'$.start_time$',end_time:'$.end_time$',sensor_id:'$sensor_id$',query_interval_type:'$.queryType$' }", function(data){
			if(isOK(data)){
				var dataT = data.data.data ;
				var lon = [];
				var tmp ;
				
				// 定位实际的点
				// 地图的长宽
				var width = $("#mapimg").width() ;  
				var height = $("#mapimg").height(); 
				// 地图中位置
				
				for(var i=0;i<dataT.length;i++){
					tmp = dataT[dataT.length - 1 -i].sdata.split(",") ;
					var x0 = width * tmp[0] / scale[0] ;
					var y0 = height * tmp[1] / scale[1] ;
					lon.push( {x: x0  , y: y0 } );
				}
				
				// 清空画布
				clearRect(context,0,0, $("#mapimg").width(),$("#mapimg").height());  
				drawLine(context , lon);
			}
		});
	}
	
	var context ;

	function loadData(){
		// 设置canvas的画布的大小和地图一样；
		setTimeout(function() {
			var width = $("#mapimg").width() ;  
			var height = $("#mapimg").height(); 
			document.getElementById("gycanvas").setAttribute("width",width);  
			document.getElementById("gycanvas").setAttribute("height",height);  
			context = document.getElementById("gycanvas").getContext("2d");  
		}, 500);
	}
	var scale ;
	var t ;
	
	function locations(lon_lat){
		if(t != null){
			 window.clearInterval(t);
		}
		// 定位实际的点
		// 地图的长宽
		var width = $("#mapimg").width() ;  
		var height = $("#mapimg").height(); 
		// 地图中位置
		var x = width * lon_lat[0] / scale[0] ;
		var y = height * lon_lat[1] / scale[1] ;
		
		// 清空画布
		clearRect(context,0,0, $("#mapimg").width(),$("#mapimg").height());  
		
		t = setInterval(function() {
			drawImage(x-16,y-32,context,32,32,"location.png") ;
			setTimeout(function() {
				clearRect(context ,x-16,y-32 ,32,32);
			}, 500);
		}, 1000);
		
	}
	
	$(function(){
		// 获取当前最新的数据 url:'/sensor?id= $.sensor_id$' 
		commonAjax('GET',localUrl+ '/sensor?id=' + sensor_id , "", function(data){
			if(isOK(data)){
				var map = strToJson( data.data.data.measure_unit_type_value );
				$("#mapimg").attr("src", basePath + "/image/oss/iot/map/" + map["1"]  );
				// 实际值坐标值
				var lon_lat = data.data.str_sdata.split(",");
				// 实际比例尺
				scale =  map["100"].split("x") ;
				setTimeout(function(){
					locations(lon_lat);
				}, 800);
			}
		});
	
		$(document).delegate(".tbody tr","click",function(){
			 var lat_lon =  $(this).children().eq(3).html().split(",");
			 locations(lat_lon);
		})
	})

// 画图片
function drawImage(lon_x , lat_y ,context,width,height,img_name ) {
	var img=new Image();
	img.onload=function() {
		context.drawImage(img,lon_x,lat_y, gdv(width,32), gdv(height,32) );
	}
	img.src= basePath + "/image/oss/iot/map/"+ img_name ;
}

// 清除画布  
function clearRect(context ,lon_x , lat_y,width,height){
	context.clearRect(lon_x ,lat_y ,width,height);
}

// 画直线
function drawLine(context,lontionsaray){
	context.strokeStyle = "#ff0000";
	context.lineWidth = 2 ;
	context.beginPath();
	for(var i=0;i<lontionsaray.length  ;i++ ){
		if( i ==0 ){
			drawImage(lontionsaray[i].x-16,lontionsaray[i].y-32,context,32,32,"start_g.png") ;
			context.moveTo(lontionsaray[i].x,lontionsaray[i].y );
			continue;
		}
		if(lontionsaray.length == 1 ){
			return ;
		}
		if( i == lontionsaray.length-1){
			drawImage(lontionsaray[i].x-16,lontionsaray[i].y-32,context,32,32,"end_r.png") ;
		}
		context.lineTo(lontionsaray[i].x,lontionsaray[i].y );
		
	}
	context.stroke();
	cntext.closePath();
}


function returnBack(){
	forwardUrl("/iot/monitor?id=${sceneId}",1000);
}

</script>
</html>